<!-- 导入弹窗 -->

<template>
  <EasyModal v-model="progress.visible" title="导入数据" class="ImportModal" noFooter small @close="toClose">
    <div v-show="!progress.timer" class="half">
      <div>1.下载excel数据模板，填写信息</div>
      <div><img :src="imgDown" /></div>
      <BtnPrimary title="下载模板" @click="toDownload" />
    </div>

    <div v-show="!progress.timer" class="half">
      <div>2.上传填写好的excel文件</div>
      <div><img :src="imgUp" /></div>
      <BtnUpload title="上传文件" isXls primary icon="" @change="toUpload" />
    </div>

    <div v-show="progress.timer" class="whole">
      <div class="ImportModal-file">
        <img :src="imgFile" />
        <div>{{ progress.file ? progress.file.name : '-' }}</div>
      </div>

      <el-progress v-bind="progressProps" />
      <div class="ImportModal-percent">
        已上传 <span>{{ progress.percent }}%</span>
      </div>

      <div>开始导入 ...</div>
      <div>共 {{ progress.total }} 条数据 ...</div>

      <div>{{ progress.tip }}</div>
      <div v-if="progress.finish">
        <div v-if="progress.success" class="ImportModal-success">导入成功 <i class="el-icon-check" /></div>
        <div v-else class="ImportModal-error">导入失败 <i class="el-icon-close" /></div>
      </div>

      <BtnPrimary :disabled="!progress.finish" title="完　成" @click="toClose" />
    </div>
  </EasyModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

const getImg = (name) => CORE.common(`excel-${name}.png`)

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ImportModal',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 下载图片
     */
    imgDown: () => getImg('down'),

    /**
     * 上传图片
     */
    imgUp: () => getImg('up'),

    /**
     * 文件图片
     */
    imgFile: () => getImg('file'),

    /**
     * 进度条属性
     */
    progressProps() {
      const { percent, finish, success } = this.progress
      return {
        percentage: percent,
        strokeWidth: 10,
        showText: false,
        status: finish ? success ? 'success' : 'exception' : null,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 下载
     */
    toDownload() {
      this.$emit('download')
    },

    /**
     * 上传
     */
    toUpload(file) {
      this.$emit('upload', file)
    },

    /**
     * 清除
     */
    toClose() {
      const { progress } = this
      progress.visible = false // 关闭弹窗
      if (progress.timer) clearInterval(progress.timer) // 清除定时器

      setTimeout(() => { // 延时清除其他数据
        Object.assign(progress, {
          finish: false, // 是否完成
          timer: null, // 计时器
          file: null, // 文件
          tip: '', // 提示语
          num: 0, // 当前数
          total: 0, // 总数
          percent: 0, // 百分比
        })
      }, 200)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
